<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>我的资料</title>
        <META http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <link href="<c:url value="/resources/css/normalize.css" />" rel="stylesheet" type="text/css" />
		<link href="<c:url value="/resources/css/lib.css" />" rel="stylesheet" type="text/css" />
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" />
        
        <link href="<c:url value="/resources/jqueryui/1.8/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />" rel="stylesheet" type="text/css" />
        <script src="<c:url value="/resources/jquery/jquery.js" />"></script>
        <script src="<c:url value="/resources/jqueryui/1.8/jquery-ui-1.8.16.custom.min.js" />"></script>
        <script src="<c:url value="/resources/jqueryui/1.8/jquery.ui.datepicker-zh-CN.js" />"></script>
        <script src="<c:url value="/resources/scripts/regionUtil.js" />"></script>
        <style>
			#regionSelectorContainer select {
			    display: inline;
			    margin-right: 10px;
			}
		</style>
    </head>
    <body>
        <div class="">
            <form:form id="form" method="post" modelAttribute="personMember" 
            		action="editPersonMember">
                <c:if test="${not empty message}">
                    <div id="message" class="success f12">
                        ${message}
                    </div>
                </c:if>
                <table class="regTable">
                    <tr class="b">
                        <td colspan="3">登陆帐户</td>
                    </tr>
                    
                    <tr>
                        <td width="20%" align="right">用户名:</td>
                        <td width="80%">
                        <c:if test="${empty personMember.id}">
                        	<form:input class="input-style1" path="username" id="username" /><span class="red"> *</span>
                        	<span id="usernameCheckerYes" class="ok">该用户名可用</span>
                        	<span id="usernameCheckerNo" class="bad">该用户名不可用</span>
                        	<span class="red" id="usernameInvalid"><form:errors path="username" /></span>
                        </c:if>
                         <c:if test="${not empty personMember.id}">
                         	${personMember.username} <form:hidden path="username" />
                         </c:if>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">密码:</td>
                        <td>
                        	<form:password class="input-style1" path="password" />
                        	<span class="red"> * <form:errors path="password" /></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码:</td>
                        <td>
                        	<form:password class="input-style1" path="password1" />
                        	<span class="red">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">Email:</td>
                        <td><form:input class="input-style1" path="email" />
                        <span class="red"> * <form:errors path="email" /></span></td>
                    </tr>
                    <tr>
                        <td colspan="3" class="b">个人信息</td>
                    </tr>
                    <tr>
                        <td align="right"><form:hidden path="id" />姓名:</td>
                        <td>
                        <form:input class="input-style1" path="name" />
                        <span class="red"> * <form:errors path="name" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">所在区域:</td>
                        <td>
                            <form:hidden path="regionId" />
                            <span id="regionSelectorContainer"></span>
                        <span class="red">*<form:errors path="regionId" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">电话:</td>
                        <td> <form:input class="input-style1" path="tel" />
                        <span class="red"> * <form:errors path="tel" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">传真:</td>
                        <td><form:input class="input-style1" path="fax" /><span class="red"><form:errors path="fax" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">联系地址:</td>
                        <td><form:input class="input-style1" path="address" />
                        <span class="red"><form:errors path="address" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">邮政编码:</td>
                        <td><form:input class="input-style1" path="postCode" />
                        <span class="red"><form:errors path="postCode" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">手机:</td>
                        <td><form:input class="input-style1" path="mobile" />
                        <span class="red"><form:errors path="mobile" /></span></td>
                    </tr>

                    <tr>
                        <td align="right">个人简介:</td>
                        <td><form:input class="input-style1" path="description" />
                        <span class="red"><form:errors path="description" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">生日:</td>
                        <td><form:input class="input-style1" path="birthday" />
                        <span class="red"> * <form:errors path="birthday" /></span></td>
                    </tr>                    
                    <tr>
                        <td align="right">性别:</td>
                        <td>
                            <form:select path="gender">
                                <option value="保密">保密</option>
                                <option value="男" <c:if test="${personMember.gender eq '男'}">selected</c:if>>男</option>
                                <option value="女" <c:if test="${personMember.gender eq '女'}">selected</c:if>>女</option>
                            </form:select>
                        <span class="red"><form:errors path="gender" /></span></td>
                    </tr>
                    
                    <tr>
                    	<td align="right">验证码:</td>
                    	<td>
                    		<form:input path="validCode" /><span class="red mr5"> *</span> 
                    		<img src="<c:url value="/validCode" />" id="validCodeImg" class="vm"/>
                    		<span class="red"><form:errors path="validCode" /></span>
                    	</td>
                    </tr>
                    <tr>
                    	<td>&nbsp;</td>
                        <td>
                            <c:if test="${not empty personMember.id}">
                                <input class="input-style2" type="submit" value="更新" />
                            </c:if>
                            <c:if test="${empty personMember.id}">
                                <input class="input-style2" type="submit" value="提交" />
                            </c:if>
                        </td>
                    </tr>
                
                </table>
            </form:form>
        </div>
    </body>
</html>
<script>
$(document).ready(function(){
    RegionUtil.restoreSel();
    $('#validCode').val('');
    $('#birthday').datepicker();
    $('#birthday').datepicker('option', 'dateFormat', 'yy-mm-dd');
    
    $('#validCodeImg').click(function(){
    	var validCodeUrl = '<c:url value="/validCode" />?';
    	$(this).attr('src', validCodeUrl + new Date);
    });
    $('#username').blur(function(){
    	var u = $(this).val();
    	if(u.length==0){
    		return;
    	}
    	$.get('<c:url value="/checkUserExist?username="/>' + u, function(data){
    		if(data=='yes'){
    			$('#usernameCheckerYes').show();
    			$('#usernameCheckerNo').hide();
    			$('#usernameInvalid').hide();
    		}
    		else{
    			$('#usernameCheckerNo').show();
    			$('#usernameCheckerYes').hide();
    			$('#usernameInvalid').hide();
    		}
    	})
    });
});
</script>